<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta content="telephone=no" name="format-detection" />
    <!-- 留作将来统一添加 -->
    <TEMPLATE>${TEMPLATE}</TEMPLATE>
    <title>视频列表</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/aui.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/index.css">
    <link rel="stylesheet" type="text/css" href="../../css/data-flex.min.css">
    <link rel="stylesheet" type="text/css" href="../../css/swiper.min.css">
    <style type="text/css">
        .vueApp {
            overflow: hidden;
        }
        .item {
            position: relative;
            margin: 20px 15px;
        }
        .cover {
            height: 200px;
            border-radius: 8px;
            box-shadow:0px 5px 10px 0px rgba(15,115,174,0.41);
        }
        .play {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 50px;
            height: 50px;
            transform: translate(-50%, -50%);
        }
        .video-info {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            height: 60px;
            background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0.8) 100%);
            border-radius: 0 0 8px 8px;
            padding: 0 15px;
            padding-top: 12px;
        }
        .video-info p {
            color: #fff;
            font-size: 12px;
        }
        .video-info p.one-line {
            font-size: 16px;
        }
    </style>
</head>
<body class="blue-bg">
    <div class="vueApp" v-cloak>
        <div class="item" @click="handleItem(item)" v-for="item,index in listData">
            <img class="cover" :src="item.holder" alt="">
            <img class="play" src="../../image/ui/play.png" alt="">
            <div class="video-info" data-flex="main:justify cross:center">
                <p class="one-line">{{item.questionName}}</p>
                <p>{{item.time}}</p>
            </div>
        </div>
        <carousel type="7" bottom="15" notbg="true"></carousel>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/service/service-tool.js"></script>
<script type="text/javascript" src="../../script/service/service-app.js"></script>
<script type="text/javascript" src="../../script/service/service-user.js"></script>
<script type="text/javascript" src="../../script/service/service-logic.js"></script>
<script type="text/javascript" src="../../script/jquery.min.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/localFile.js"></script>
<script type="text/javascript" src="../../script/swiper.min.js"></script>
<script type="text/javascript" src="../../script/component/carousel.js"></script>
<script type="text/javascript">
    // html 的引号一律为双引号(""),js 为单引号('')
    var USER, $S, vm;
    var pageParam = {};
    apiready = function(){
        $S = SERVICE();
        USER = USER();
        console.log(JSON.stringify(api.pageParam) + '=====pageParam');
        pageParam = api.pageParam;
        fnInit();
        initLocalDownload();
    };

    // 初始化
    function fnInit() {
        vm = new Vue({
            el: '.vueApp',
            data: {
                info: null,
                listData: [],
                pageNo: 1,
                pageSize: 10
            }
        });
        getPageData();
    }

    // 获取页面数据
    function getPageData() {
        var url = 'question/findQuestionList';
        var params = {
            id: pageParam.id,
            questionTypeCode: pageParam.code
        };
        var callback = function(data) {
            var listData = data.listData;
            for(var i = 0; i < listData.length; i ++) {
                var item = listData[i];
                item.holder = item.questionVideoUrl + '?x-oss-process=video/snapshot,t_100,m_fast';
                item.time = videoTime(item.videoTimeLength);
            }
            vm.listData = listData;
        };
        POST(url, params, callback);
    }

    function videoTime(sender) {
        sender = sender || 0;
        var time = parseInt(sender);
        var s = time % 60,
            m = (time - s) / 60;
        return (m > 9 ? m : '0' + m) + ':' + (s > 9 ? s : '0' + s);
    }

    // 点击item
    function handleItem(item) {
        fnOpenPublicWin(item.questionName, 'course1/play_video', {
            url: item.questionVideoUrl, // fileIsSave(item.id+"questionVideoUrl") || item.questionVideoUrl,
            isSlidBack: false
        });
    }
</script>
</html>